<template>
  <div class="container">
    <div class="statisticsTitleSty">制度落实比例</div>
    <div class="warningcenterBox" style="padding-bottom: 5px">
      <div id="warningcenter" class="chartbg"></div>
    </div>
  </div>
</template>

<script>
import complain from '../bigScreen/riskwarning/complain.json'

export default {
  name: 'systemRatio',
  data() {
    return {
      warningcenterData: [], //待处理
      isWidth: true,
      warningCenterChart: '',
    }
  },
  created() {},

  mounted() {
    const windowWidth = window.screen.width
    const windowHeight = window.screen.height
    if (windowWidth <= 1600) {
      this.isWidth = false
    }
    if (windowWidth <= 1366 && windowHeight <= 864) {
      this.isLow = true
    }
    this.getWarningData(this.area)
  },
  props: {
    area: {
      type: String,
      default: '',
    },
  },
  watch: {
    area(val) {
      this.getWarningData(val)
    },
  },
  activated() {
    // 解决其他页面浏览器放大缩小，切换到本页面echarts不显示的问题
    if (this.warningCenterChart) {
      setTimeout(() => {
        this.warningCenterChart.resize()
      }, 100)
    }
  },
  methods: {
    getWarningData(areaId) {
      this.axios({
        method: 'post',
        url: 'api-s/cs/projectstats/base/findinstitutiondata',
        data: {
          areaId,
        },
      })
        .then((response) => {
          if (response.data.hasError) {
            this.$message.error(response.data.errorMsg)
          } else {
            const data = response.data.result
            this.drawWarningcenter('warningcenter', data)
          }
        })
        .catch((error) => {
          this.$message.error(error.response.data)
        })
    },
    drawWarningcenter(id, data) {
      let valueD = data.values
      let valueData = valueD.map((v) => {
        return Math.floor(v * 10000) / 100
      })
      console.log(valueData)
      this.warningCenterChart = echarts.init(document.getElementById(id))
      this.warningCenterChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: '{b}:{c}%',
        },
        grid: {
          top: '20%',
          left: '3%',
          right: '3%',
          bottom: '8%',
          containLabel: true,
        },
        color: '#57CCA0',
        xAxis: [
          {
            data: data.names,
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#b8e8fa',
                width: 0.5,
              },
            },
            nameTextStyle: {
              fontSize: 12,
              color: '#7193B2',
              fontStyle: 'oblique',
            },
            axisTick: {
              show: false,
              alignWithLabel: true,
            },
            axisLabel: {
              show: true,
              // rotate: 45,
              fontSize: 12,
              // interval: 0, //标签全显示
              formatter: function (val) {
                var strs = val.split('') //字符串数组
                var str = ''
                for (var i = 0, s; (s = strs[i++]); ) {
                  //遍历字符串数组
                  str += s
                  if (!(i % 4)) str += '\n' //按需要求余
                }
                return str
              },
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              show: true,
              textStyle: {
                color: '#b8e8fa',
                fontSize: '50%',
              },
              interval: 0,
              showMinLabel: true,
              formatter: '{value} %',
            },
            min: 0,
            max: 100,
            splitNumber: 5,
            axisLine: {
              show: false,
              lineStyle: {
                fontSize: 12,
                color: '#416180',
              },
            },
            splitLine: {
              lineStyle: {
                color: '#416180',
                width: 0.5,
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: '制度落实比例',
            type: 'bar',
            data: valueData,
            barWidth: 30,
          },
        ],
      })
      var vm = this
      // this.warningCenterChart.on('click', function (param) {
      //     vm.$router.push({
      //         path: "/home/project/constructAlertProjectList",
      //         name: "constructAlertProjectList",
      //         query: {
      //         alertType: typeId[param.dataIndex],
      //         // ischuzhou: true,
      //         }
      //     });
      //     vm.$store.commit("CHANGE_SLIDER_NAME", {
      //         oldUrl: "/home/project/constructAlertProjectList",
      //         newUrl: vm.$router.currentRoute.fullPath
      //     });
      // });
      window.addEventListener('resize', () => {
        this.warningCenterChart.resize()
      })
    },
    systemRatioEchart() {
      this.warningCenterChart.resize()
    },
  },
}
</script>

<style scoped lang="less">
.container {
  height: 100%;
  .statisticsTitleSty {
    height: 30px;
    line-height: 30px;
    padding-left: 12px;
    font-weight: 500;
    color: #5bfcf4;
    font-size: 16px;
    background: url('../../assets/titleBox.png') center center no-repeat;
    background-size: cover;
  }
  .warningcenterBox {
    height: calc(100% - 30px);
  }
  .chartbg {
    height: 100%;
    bottom: 5px;
    // overflow: hidden;
  }
}
</style>
